/*
持久化：
   1：值修改了就存储到浏览器
   2：初始值读取浏览器存储

vuex-persistedstate:对vuex内的数据做持久化处理
   1：下载  npm i vuex-persistedstate
   2:导入  src/store/index.js中导入
     import persistedstate from 'vuex-persistedstate'
   3：配制
      {
        state,mutations...，
        plugins:[
          persistedstate({
            只写模块名代表整 个模块持久化
            针对 某字段持久化  模块名.字段名
            paths:['模块名.字段名','模块名']
          })
        ]
      }

js-cookie
   1：下载
   2：导入  import jsCookie from 'js-cookie'
   3：
     获取： jsCookie.get(key)
     设置:  jsCookie.set(key,value)
     删除:  jsCookie.remove(key)

 路由传参
    query:
       传：
         this.$router.push('/path?参数名=值')
       收
         this.$route.query.参数名
    params
       动态路由匹配:可以要求参数必传
          配制路由
             {
               path:'/path/:id'
             }
          传：
            this.$router.push('/path/123')
          收：
            this.$route.params.id

       通过name传值：通过内存传递的值，刷新参数就没了，它没有数据类型与长度的限制
          配制路由
             {
              path:'/path',
              name:'path'
             }
          传：
            this.$router.push({
              name:'path',
              params:{
                参数名:值
              }
            })
          收：
            this.$route.params.参数名

*/
// import jsCookie from "js-cookie";
import { sysLogin } from '@/api/login'
import router, { asyncRoutes, constantRoutes, resetRouter } from '@/router' // router===this.$router
import { sysProfile, sysUser } from '@/api/user'

export default {
  namespaced: true,
  state: {
    // token: localStorage.getItem('token') || ''
    // token: jsCookie.get("token") || "",
    token: '',
    userInfo: '' // 用户信息
  },
  mutations: {
    setToken(state, value) {
      state.token = value
      // localStorage.setItem('token', value)
      // jsCookie.set("token", value);
    },
    // 退出操作
    logout(state) {
      state.token = ''
      state.userInfo = ''
      // 重置路由
      resetRouter()
      router.push('/login?redirect=' + location.href.split('#')[1])
    },
    // 修改用户信息
    setUserInfo(state, value) {
      state.userInfo = value
    }
  },
  actions: {
    // 登陆接口调用：复用
    async toLogin(ctx, form) {
      // 调用登陆接口
      const res = await sysLogin(form)
      // 存储token
      // console.log(3)
      ctx.commit('setToken', res.data)
    },
    // 获取用户信息
    async getUserInfo({ commit }) {
      const res = await sysProfile()
      const res2 = await sysUser(res.data.userId)
      // console.log(res2)
      /*
      合并对象
          {...a,...b}
          Object.assign({},a,b)
      */
      //  为什么深拷贝：数据修改会有影响互相有影响
      const res3 = Object.assign({}, res.data, res2.data)
      commit('setUserInfo', res3)
      // 将用户信息中的权限数据与动态路由做匹配  a:创建匹配的点   b:拿到数据匹配
      // 动态路由  asyncRoutes
      // 用户信息中的权限数据  res3.roles.menus
      const newArr = asyncRoutes.filter((item) => {
        return res3.roles.menus.includes(item.meta.name)
        // item.meta.name如果在权限数据中存在，就保留
      })
      // console.log('匹配的动态路由:', newArr)
      // 将匹配的数据添加到路由
      // router.addRoutes([需要添加的路由])  用于添加路由到当前路由routes中
      // addRoutes是vue2使用添加路由配制到路由中的一种写法，到了vue3变成了addRoute:添加一个
      // 加入404路由
      newArr.push({ path: '*', redirect: '/', hidden: true })
      router.addRoutes(newArr)
      // addRoutes添加的路由不能立马使用，立马使用时根本访问不了
      // 再经历一次导航守卫 它就可以正常使用了
      // 解决  next(to)
      // 404路由配制处理
      // 刚添加的路由配制还不能立马使用，但它会立马匹配到404，所以404要和动态路由一想添加进来
      // 更新router.options.routes:修改router.options.routes的值当前的路由数据
      router.options.routes = [...constantRoutes, ...newArr]
    }
  },
  getters: {}
}
